<template>
    <el-container direction="horizontal" style="height: 100%;width: 100%;overflow:hidden;">
        <el-aside width="20%" style="height: 100%;background-color: #ffffff;" >
            <el-row style="height: 100%;">
                <el-col :span="20" style="background-color: #F6F6F6;height: 100%;">
                    <div class="title">节目场景（{{scenesList.length}}个）</div>
                    <div class="add-btn" @click="addScenes">
                        <i class="el-icon-circle-plus"></i>
                    </div>
                    <div class="scenes-list">
                        <div :class="(selectScenes == index?'scenes-item-select':'scenes-item')" v-for="(item,index) in scenesList" :key="index" @click="selectScenesItem(index)">
                            <div class="scenes-number">{{index+1}}</div>
                            <img :src="item.imgSrc" class="scenes-item-img">
                            <div>
                                场景-{{index+1}}
                            </div>
                        </div>
                    </div>
                </el-col>
                <el-col :span="4" style="border-left: 1px solid #DDDDDD;height: 100%">
                    <div class="icon-item" v-for="(item,index) in iconList" :key="index" @click="addItem(item.value)">
                        <i :class="item.icon"></i>
                    </div>
                </el-col>
            </el-row>
        </el-aside>
        <el-main style="height: 100%;background-color: #C3C3C3;" >
            <div class="div-canvas" ref = 'imageDom'>
                <my-vdr
                   :type="item.type"
                   :index="index"
                   :w="item.width"
                   :h="item.height"
                   :x="item.x"
                   :y="item.y"
                   :z="item.z"
                   @onDrag="onDrag"
                   @onResize="onResize"
                   @onResizeStop="onResizeStop"
                   @onDragStop="onDragStop"
                   :key="index"
                   v-for="(item,index) in scenesList[selectScenes].children"
                ></my-vdr>
            </div>
        </el-main>
    </el-container>
</template>

<script>
    import html2canvas from 'html2canvas';
    import MyVdr from "../components/myVdr";
    export default {
        name: "drag",
        components: {MyVdr},
        data(){
            return{
                iconList:[
                    {
                        icon:'el-icon-picture',
                        value:'img'
                    },
                    {
                        icon:'el-icon-video-play',
                        value:'video'
                    }
                ],
                scenesList:[
                    {
                        imgSrc:'',
                        children:[
                            {
                                type:'img',
                                width: 100,
                                height: 100,
                                x: 0,
                                y: 0,
                                z: 'auto'
                            }
                        ]
                    }
                ],
                selectScenes:0
            }
        },
        mounted(){
            this.getImg(this.selectScenes);
        },
        methods:{
            onResizeStop(x, y, width, height,index){
                this.getImg(this.selectScenes);
            },
            onDragStop(x, y,index){
                this.getImg(this.selectScenes);
            },
            onResize: function (x, y, width, height,index) {
                this.scenesList[this.selectScenes].children[index].height = height;
                this.scenesList[this.selectScenes].children[index].width = width;
                this.scenesList[this.selectScenes].children[index].x = x;
                this.scenesList[this.selectScenes].children[index].y = y;
            },
            onDrag: function (x, y,index) {
                this.scenesList[this.selectScenes].children[index].x = x;
                this.scenesList[this.selectScenes].children[index].y = y;
            },
            selectScenesItem(index){
                this.selectScenes = index;
            },
            addItem(type){
                let list = this.scenesList[this.selectScenes].children;
                list.push({
                    type:type,
                    width: 100,
                    height: 100,
                    x: 0,
                    y: 0,
                    z: 'auto'
                })
                this.scenesList[this.selectScenes].children = list;
            },
            addScenes(){
                let list = this.scenesList;
                list.push({
                    imgSrc:'',
                    children:[
                        {
                            type:'img',
                            width: 100,
                            height: 100,
                            x: 0,
                            y: 0,
                            z: 'auto'
                        }
                    ]
                })
                this.scenesList = list;
                this.selectScenes = (list.length - 1);
                this.getImg(this.selectScenes);
            },
            getImg(index){
                html2canvas(this.$refs.imageDom).then((canvas) => {
                    this.scenesList[index].imgSrc = canvas.toDataURL('image/png')
                        .replace('image/png','image/octet-stream')
                })
            }
        }
    }
</script>

<style>
    html,body,#app{
        /*设置内部填充为0，几个布局元素之间没有间距*/
        padding: 0px;
        /*外部间距也是如此设置*/
        margin: 0px;
        /*统一设置高度为100%*/
        height: 100%;
    }
    .div-canvas{
        width: 1100px;
        height: 600px;
        box-shadow: 10px 10px 10px #888888;
        background-color: #ffffff;
    }
    .title{
        width: 16.7%;
        text-align: center;
        height: 40px;
        line-height: 40px;
        font-size: 14px;
        border-bottom: 1px solid #C3C3C3;
        background-color: #ffffff;
        position: fixed;
        top: 0;
        left: 0;
    }
    .icon-item{
        height: 40px;
        line-height: 40px;
        text-align: center;
        border-bottom: 1px solid #C3C3C3;
        cursor: pointer;
        color: #888888;
    }
    .icon-item:hover{
        color: #2695F7;
    }
    .add-btn{
        width: 16.7%;
        text-align: center;
        height: 40px;
        line-height: 40px;
        font-size: 26px;
        background-color: #2695F7;
        position: fixed;
        left: 0;
        bottom: 0;
        color: #ffffff;
    }
    .scenes-list{
        width: 100%;
        margin-top: 40px;
        margin-bottom: 40px;
    }
    .scenes-item{
        width: 100%;
        height: 160px;
        background-color: #ffffff;
        border-bottom: 1px solid #C3C3C3;
    }
    .scenes-item-select{
        width: 100%;
        height: 160px;
        background-color: #2695F7;
        border-bottom: 1px solid #C3C3C3;
    }
    .scenes-number{
        width: 20px;
        height: 20px;
        text-align: center;
        line-height: 20px;
        color: #ffffff;
        background-color: #0A5C3B;
        font-size: 12px;
    }
    .scenes-item-img{
        width: 140px;
        height: 100px;
        background-color: #F6F6F6;
        object-fit: contain;
    }
</style>
